<template>
<div>
    <navs></navs>
    <div class="head" style="margin-top:6rem">
        <div class="cv" ref="c" >
            <span>添加成功</span>
        </div>
        <div class="top" id="a0" ref="a0">
            <router-link to="">{{commodity.title1}}&gt;</router-link>
            <router-link to="">{{commodity.title2}}&gt;</router-link>
            <router-link to="">{{commodity.title3}}&gt;</router-link>
        </div>
        <div class="thumbnail">
            <div class="max"> 
                <div class="left">
                    <div v-for="(item,index) in list" :key="index" :style="item" v-show="item.isShow">
                        <span class="l" @click="left(index)">&lt;</span><span class="r" @click="right(index)">&gt;</span>
                    </div>
                </div>
            </div>
            <div class="right"> 
                 <div class="right-top">
                     <div>
                        <h1>{{commodity.name}}</h1>
                        <p>￥{{commodity.Price}}</p>
                     </div>
                     <div>
                        <span>{{commodity.num}}</span>
                        <span>￥{{commodity.price}}</span>
                     </div>
                </div>
                <div class="right-body">
                    <p>价格说明</p> 
                    <span>颜色:{{text}}</span>
                    <div class="bgc">
                        <ul>
                            <li v-for="(item,index) in color" :key="index" :style="item" :class="{ash: item.num==index}" @click="add(index)">
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="right-foot">
                    <div>
                        <div class="foot">
                            <p>尺码:</p>
                            <span @click="eu" :class="{eu: num==1}">EU</span>
                            <span @click="cn" :class="{eu: num==2}">CN</span> 
                        </div>
                        <div class="list-size">
                            <div v-for="(item,index) in Size" :key="index" @click="handoff(index)" :class="{color: control==index}">{{item}}</div>
                        </div>
                    </div>
                    <div class="pay">
                       <div><router-link to="" class='lin' @click="anim">加入购物车</router-link></div>
                        <div><router-link to="/cart" class="black" >立即购买</router-link></div>
                    </div>
                </div>
                <div class="under">
                    <div class="under-left">
                        <span>分享:</span>
                        <span class="wb"></span>
                        <span class="wx"></span>
                    </div>
                    <div class="under-right">
                        <span></span>
                        <span>收藏</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav">
            <div :class="{a1:loc==1}">
                <a @click="a0">产品描述</a>
            </div>
            <div :class="{a1:loc==2}">
                <a @click="a1">产品详情</a>
            </div>
            <div :class="{a1:loc==3}">
                <a @click="a2">产品推荐</a>
            </div>
        </div>
        <div class="description">
            <a href="" name="a1"></a>
            <h3 id="a1" ref="a1">产品详情</h3>
            <div class="content">
                <div v-for="(item,index) in imglist" :key="index">
                    <img :src="item.src" alt="">
                </div>
            </div>
            <a href="" name="a2"></a>
             <h4 id="a2" ref="a2">产品推荐</h4>
             <div class="recommend">
                 <div v-for="(item,index) in recommend" :key="index">
                     <router-link to="">
                        <img :src="item.src" alt="">
                        <h5>{{item.name}}</h5>
                        <p>￥{{item.price}}</p>
                     </router-link>
                 </div>
             </div>
             <div class="vip">
                <router-link to=""> 
                    <h2>注册会员&gt;</h2>
                    <p>立享150元优惠券，更享生日福利等权益</p>
                </router-link>
             </div>
        </div>
    </div>
    <returnTop></returnTop>
    <footers></footers>
</div>

</template>>
<script>
// 引入组件
import returnTop from "../components/ReturnTop.vue";
import navs from "../components/Nav.vue";
import footers from "../components/Footer.vue";
import '../../public/css/Details.css';
export default {
    data() {
        return {
            num: 1,
            control: -1,
            loc: 1,
            list: [
                {
                    background: "url(../../public/images/details/01.jpg)no-repeat center",
                    isShow: true
                },
                {
                    background: "url(../../public/images/details/02.jpg)no-repeat center",
                    isShow: false
                },
                {
                    background: "url(../../public/images/details/03.jpg)no-repeat center",
                    isShow: false
                },
                {
                    background: "url(../../public/images/details/04.jpg)no-repeat center",
                    isShow: false
                },
                {
                    background: "url(../../public/images/details/05.jpg)no-repeat center",
                    isShow: false
                }
            ],
            commodity: {
                name: "ECCO型塑20尖头系列女士正装鞋",
                Price: 1549,
                price: 1999,
                num: 52324460345,
                title1: "女士",
                title2: "女鞋",
                title3: "高跟鞋"
            },
            color: [{
                    background: "url(../../public/images/details/01.jpg)no-repeat center",
                    backgroundSize: "40px",
                    color1: "石灰色",
                    num: 0
                }, {
                    background: "url(../../public/images/details/06.jpg)no-repeat center",
                    backgroundSize: "40px",
                    color1: "托斯卡纳粉",
                    num: 0
                }, {
                    background: "url(../../public/images/details/07.jpg)no-repeat center",
                    backgroundSize: "40px",
                    color1: "黑色",
                    num: 0
                }],
            text: "石灰色",
            Size: [35, 36, 37, 38, 39, 40,],
            // Size:[35,36,37,38,39,40],
            imglist: [
                {
                    src: "../../public/images/details/91.jpg"
                },
                {
                    src: "../../public/images/details/92.jpg"
                },
                {
                    src: "../../public/images/details/94.jpg"
                },
                {
                    src: "../../public/images/details/95.jpg"
                },
                {
                    src: "../../public/images/details/96.jpg"
                },
                {
                    src: "../../public/images/details/97.jpg"
                },
                {
                    src: "../../public/images/details/98.jpg"
                },
                {
                    src: "../../public/images/details/99.jpg"
                },
                {
                    src: "../../public/images/details/100.jpg"
                },
                {
                    src: "../../public/images/details/101.jpg"
                },
            ],
            recommend: [
                {
                    name: "ECCO街头720系列女士休闲鞋",
                    price: 2199,
                    src: "../../public/images/details/81.jpg"
                },
                {
                    name: "ECCO复古跑鞋系列女士休闲鞋",
                    price: 1999,
                    src: "../../public/images/details/82.jpg"
                },
                {
                    name: "ECCO型塑35方头系列女士正装鞋",
                    price: 1799,
                    src: "../../public/images/details/83.jpg"
                },
            ]
        };
    },
    methods: {
        left(index) {
            if (index >= 1) {
                this.list[index].isShow = false;
                this.list[index - 1].isShow = true;
            }
            else if (index == 0) {
                this.list[index].isShow = false;
                this.list[this.list.length - 1].isShow = true;
            }
        },
        right(index) {
            if (index < this.list.length - 1) {
                console.log(this.list.length);
                this.list[index].isShow = false;
                this.list[index + 1].isShow = true;
            }
            else {
                this.list[index].isShow = false;
                this.list[0].isShow = true;
            }
        },
        add(index) {
            this.text = this.color[index].color1;
            for (var i = 0; i < this.color.length; i++) {
                this.color[i].num = index;
            }
        },
        eu() {
            this.num = 1;
            this.Size = [35, 36, 37, 38, 39, 40,];
        },
        cn() {
            this.num = 2;
            this.Size = [220, 225, 235, 240, 245, 255];
        },
        handoff(index) {
            this.control = index;
        },
        a0() {
            this.loc = 1;
            console.log(this.$refs.a0.getBoundingClientRect());
            this.$el.querySelector("#a0").scrollIntoView({ block: "start", behavior: "smooth" });
        },
        a1() {
            this.loc = 2;
            console.log(this.$refs.a1.getBoundingClientRect());
            this.$el.querySelector("#a1").scrollIntoView({ block: "start", behavior: "smooth" });
        },
        a2() {
            this.loc = 3;
            console.log(this.$refs.a2.getBoundingClientRect());
            this.$el.querySelector("#a2").scrollIntoView({ block: "start", behavior: "smooth" });
        },
        anim(){
            this.$refs.c.classList.add("anim")
            setTimeout(()=>{
                this.$refs.c.classList.remove('anim')
            },800)
        }
    },
    components: { 
        returnTop,
        navs,
        footers
     },
    setup(){
        let aaa=3
    },
    beforeCreate(){
        console.log(this.aaa);
    },
    created(){
        console.log(this.aaa);
    },
    mounted(){
        console.log(this.data);
        console.log(this.aaa);
    }
}
</script>